import React from "react";
import "../../../styles/DepositTypeList.scss";
import type { ColumnsType } from "antd/es/table";
import { Input, Button, Table, Space } from "antd";
interface Props {}
function DepositTypeList(props: Props) {
  interface DataType {
    key: string;
    name: string;
    zhuangtai: string;
  }
  const columns: ColumnsType<DataType> = [
    {
      title: "出库类型ID",
      dataIndex: "key",
      key: "key",
    },
    {
      title: "出库类型名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "出库类型状态",
      dataIndex: "zhuangtai",
      key: "zhuangtai",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a>编辑</a>
        </Space>
      ),
    },
  ];
  const data: DataType[] = [
    {
      key: "4317146985784",
      name: "领用出库",
      zhuangtai: "启用",
    },
    {
      key: "613976936645",
      name: "调拨出库",
      zhuangtai: "停用",
    },
    {
      key: "613976936658",
      name: "调拨出库",
      zhuangtai: "启用",
    },
  ];
  var search = function (datas: any) {
    console.log(datas);
  };
  return (
    <div className="deposittypelist">
      <div className="head">仓储管理 / 出库管理 / 出库类型</div>
      <div className="middle">
        <Input placeholder="请输入出库类型名称" />
        <Input placeholder="请选择出库类型状态" />
        <Button type="primary" onClick={search}>
          搜索
        </Button>
        <Button type="primary" onClick={search}>
          创建
        </Button>
      </div>
      <div className="main">
        <Table columns={columns} dataSource={data} />
      </div>
    </div>
  );
}

export default DepositTypeList;
